<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">←</text>
				<text class="back-text">返回</text>
			</view>
			<text class="page-title">许可申请</text>
			<view class="header-right">
				<text class="save-btn" @click="saveDraft">保存</text>
			</view>
		</view>
		
		<!-- 步骤条 -->
		<view class="steps-container">
			<view class="steps">
				<view class="step" :class="{ active: currentStep >= 0, completed: currentStep > 0 }">
					<view class="step-number">1</view>
					<text class="step-text">JSA选择</text>
				</view>
				<view class="step-line" :class="{ active: currentStep > 0 }"></view>
				<view class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
					<view class="step-number">2</view>
					<text class="step-text">基本信息</text>
				</view>
				<view class="step-line" :class="{ active: currentStep > 1 }"></view>
				<view class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
					<view class="step-number">3</view>
					<text class="step-text">工作内容</text>
				</view>
				<view class="step-line" :class="{ active: currentStep > 2 }"></view>
				<view class="step" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
					<view class="step-number">4</view>
					<text class="step-text">危险识别</text>
				</view>
				<view class="step-line" :class="{ active: currentStep > 3 }"></view>
				<view class="step" :class="{ active: currentStep >= 4, completed: currentStep > 4 }">
					<view class="step-number">5</view>
					<text class="step-text">安全措施</text>
				</view>
				<view class="step-line" :class="{ active: currentStep > 4 }"></view>
				<view class="step" :class="{ active: currentStep >= 5 }">
					<view class="step-number">6</view>
					<text class="step-text">确认提交</text>
				</view>
			</view>
		</view>
		
		<!-- 表单内容 -->
		<scroll-view class="form-scroll" scroll-y>
			<view class="form-container">
				<!-- 步骤1: JSA选择 -->
				<view v-if="currentStep === 0" class="form-section">
					<view class="section-title">
						<text class="title-text">选择JSA</text>
						<text class="title-desc">请选择本次工作许可对应的JSA安全分析文档</text>
					</view>
					<view class="jsa-list">
						<view 
							class="jsa-item" 
							v-for="(jsa, index) in jsaList" 
							:key="index"
							:class="{ selected: selectedJsa === jsa.id }"
							@click="selectJsa(jsa.id)"
						>
							<view class="jsa-info">
								<text class="jsa-number">{{ jsa.number }}</text>
								<text class="jsa-desc">{{ jsa.description }}</text>
								<text class="jsa-location">📍 {{ jsa.location }}</text>
							</view>
							<view class="jsa-status" :class="jsa.status">{{ jsa.statusText }}</view>
						</view>
					</view>
					<view class="step-actions">
					<button class="btn btn-primary" @click="nextStep" :disabled="!selectedJsa">下一步</button>
					</view>
				</view>
				
				<!-- 步骤2: 基本信息 -->
				<view v-if="currentStep === 1" class="form-section">
					<view class="section-title">
						<text class="title-text">基本信息</text>
						<text class="title-desc">填写申请人和工作基本信息</text>
					</view>
					<view class="form-item">
						<text class="form-label">申请人</text>
						<input class="form-input" v-model="formData.applicant" placeholder="请输入申请人姓名" />
					</view>
					<view class="form-item">
						<text class="form-label">申请部门</text>
						<picker :value="departmentIndex" :range="departmentList" range-key="name" @change="onDepartmentChange">
							<view class="picker-view">
								<text class="picker-text">{{ selectedDepartment.name || '请选择申请部门' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">联系电话</text>
						<input class="form-input" v-model="formData.contactPhone" placeholder="请输入联系电话" type="number" />
					</view>
					<view class="form-item">
						<text class="form-label">工作负责人</text>
						<picker :value="responsiblePersonIndex" :range="responsiblePersonList" range-key="name" @change="onResponsiblePersonChange">
							<view class="picker-view">
								<text class="picker-text">{{ selectedResponsiblePerson.name || '请选择工作负责人' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="step-actions">
						<button class="btn btn-secondary" @click="prevStep">上一步</button>
						<button class="btn btn-primary" @click="nextStep">下一步</button>
					</view>
				</view>

				<!-- 步骤3: 工作内容 -->
				<view v-if="currentStep === 2" class="form-section">
					<view class="section-title">
						<text class="title-text">工作内容</text>
						<text class="title-desc">详细描述工作内容、范围和时间安排</text>
					</view>
					<view class="form-item">
						<text class="form-label">工作类型</text>
						<view class="work-type-selector">
							<view
								v-for="(type, index) in workTypes"
								:key="index"
								class="work-type-item"
								:class="{ selected: formData.workType === type.value }"
								@click="formData.workType = type.value"
							>
								<text class="type-icon">{{ type.icon }}</text>
								<text class="type-name">{{ type.name }}</text>
							</view>
						</view>
					</view>
					<view class="form-item">
						<text class="form-label">工作开始时间</text>
						<picker mode="datetime" :value="formData.startTime" @change="onStartTimeChange">
							<view class="picker-view">
								<text class="picker-text">{{ formData.startTime || '请选择开始时间' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">工作结束时间</text>
						<picker mode="datetime" :value="formData.endTime" @change="onEndTimeChange">
							<view class="picker-view">
								<text class="picker-text">{{ formData.endTime || '请选择结束时间' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">工作详细内容</text>
						<textarea class="form-textarea" v-model="formData.workDescription" placeholder="请详细描述工作内容、步骤和要求" :maxlength="500"></textarea>
						<text class="char-count">{{ formData.workDescription.length }}/500</text>
					</view>
					<view class="form-item">
						<text class="form-label">工作地点</text>
						<input class="form-input" v-model="formData.workLocation" placeholder="请输入具体工作地点" />
					</view>
					<view class="step-actions">
						<button class="btn btn-secondary" @click="prevStep">上一步</button>
						<button class="btn btn-primary" @click="nextStep">下一步</button>
					</view>
				</view>

				<!-- 步骤4: 危险识别 -->
				<view v-if="currentStep === 3" class="form-section">
					<view class="section-title">
						<text class="title-text">危险识别</text>
						<text class="title-desc">识别工作中可能存在的危险和风险</text>
					</view>
					<view class="risk-assessment">
						<view class="assessment-section">
							<text class="section-subtitle">潜在危险</text>
							<view class="risk-list">
								<view
									v-for="(risk, index) in potentialRisks"
									:key="index"
									class="risk-item"
									:class="{ selected: formData.selectedRisks.includes(risk.id) }"
									@click="toggleRisk(risk.id)"
								>
									<view class="risk-info">
										<text class="risk-name">{{ risk.name }}</text>
										<text class="risk-level" :class="risk.level">{{ risk.levelText }}</text>
									</view>
									<view class="checkbox" :class="{ 'checked': formData.selectedRisks.includes(risk.id) }">
										<text class="check-icon" v-if="formData.selectedRisks.includes(risk.id)">✓</text>
									</view>
								</view>
							</view>
						</view>
						<view class="assessment-section">
							<text class="section-subtitle">其他危险说明</text>
							<textarea class="form-textarea" v-model="formData.additionalRisks" placeholder="请描述其他未列出的潜在危险" :maxlength="300"></textarea>
							<text class="char-count">{{ formData.additionalRisks.length }}/300</text>
						</view>
					</view>
					<view class="step-actions">
						<button class="btn btn-secondary" @click="prevStep">上一步</button>
						<button class="btn btn-primary" @click="nextStep">下一步</button>
					</view>
				</view>

				<!-- 步骤5: 安全措施 -->
				<view v-if="currentStep === 4" class="form-section">
					<view class="section-title">
						<text class="title-text">安全措施</text>
						<text class="title-desc">制定相应的安全措施和控制要求</text>
					</view>
					<view class="safety-measures">
						<view class="measures-section">
							<text class="section-subtitle">必选安全措施</text>
							<view class="measure-list">
								<view
									v-for="(measure, index) in requiredMeasures"
									:key="index"
									class="measure-item required"
								>
									<view class="checkbox checked">
										<text class="check-icon">✓</text>
									</view>
									<view class="measure-info">
										<text class="measure-name">{{ measure.name }}</text>
										<text class="measure-desc">{{ measure.description }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="measures-section">
							<text class="section-subtitle">额外安全措施</text>
							<view class="measure-list">
								<view
									v-for="(measure, index) in additionalMeasures"
									:key="index"
									class="measure-item"
									:class="{ selected: formData.selectedMeasures.includes(measure.id) }"
									@click="toggleMeasure(measure.id)"
								>
									<view class="checkbox" :class="{ 'checked': formData.selectedMeasures.includes(measure.id) }">
										<text class="check-icon" v-if="formData.selectedMeasures.includes(measure.id)">✓</text>
									</view>
									<view class="measure-info">
										<text class="measure-name">{{ measure.name }}</text>
										<text class="measure-desc">{{ measure.description }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="measures-section">
							<text class="section-subtitle">其他安全要求</text>
							<textarea class="form-textarea" v-model="formData.additionalMeasures" placeholder="请描述其他安全措施或特殊要求" :maxlength="300"></textarea>
							<text class="char-count">{{ formData.additionalMeasures.length }}/300</text>
						</view>
					</view>
					<view class="step-actions">
						<button class="btn btn-secondary" @click="prevStep">上一步</button>
						<button class="btn btn-primary" @click="nextStep">下一步</button>
					</view>
				</view>
				
				<!-- 步骤6: 确认提交 -->
				<view v-if="currentStep === 5" class="form-section">
					<view class="section-title">
						<text class="title-text">确认提交</text>
						<text class="title-desc">请确认所有信息并提交申请</text>
					</view>
					<view class="confirm-summary">
						<view class="summary-section">
							<text class="summary-title">📋 基本信息</text>
							<view class="summary-content">
								<view class="summary-item">
									<text class="summary-label">JSA编号：</text>
									<text class="summary-value">{{ getSelectedJsaInfo().number }}</text>
								</view>
								<view class="summary-item">
									<text class="summary-label">申请人：</text>
									<text class="summary-value">{{ formData.applicant }}</text>
								</view>
								<view class="summary-item">
									<text class="summary-label">申请部门：</text>
									<text class="summary-value">{{ selectedDepartment.name }}</text>
								</view>
								<view class="summary-item">
									<text class="summary-label">工作负责人：</text>
									<text class="summary-value">{{ selectedResponsiblePerson.name }}</text>
								</view>
							</view>
						</view>

						<view class="summary-section">
							<text class="summary-title">⚙️ 工作信息</text>
							<view class="summary-content">
								<view class="summary-item">
									<text class="summary-label">工作类型：</text>
									<text class="summary-value">{{ getWorkTypeName(formData.workType) }}</text>
								</view>
								<view class="summary-item">
									<text class="summary-label">工作时间：</text>
									<text class="summary-value">{{ formatDateTime(formData.startTime) }} - {{ formatDateTime(formData.endTime) }}</text>
								</view>
								<view class="summary-item">
									<text class="summary-label">工作地点：</text>
									<text class="summary-value">{{ formData.workLocation }}</text>
								</view>
							</view>
						</view>

						<view class="summary-section">
							<text class="summary-title">⚠️ 风险评估</text>
							<view class="summary-content">
								<view class="summary-item">
									<text class="summary-label">已识别风险：</text>
									<text class="summary-value">{{ getSelectedRisksText() }}</text>
								</view>
								<view v-if="formData.additionalRisks" class="summary-item">
									<text class="summary-label">其他风险：</text>
									<text class="summary-value">{{ formData.additionalRisks }}</text>
								</view>
							</view>
						</view>

						<view class="summary-section">
							<text class="summary-title">🛡️ 安全措施</text>
							<view class="summary-content">
								<view class="summary-item">
									<text class="summary-label">额外措施：</text>
									<text class="summary-value">{{ getSelectedMeasuresText() }}</text>
								</view>
								<view v-if="formData.additionalMeasures" class="summary-item">
									<text class="summary-label">其他要求：</text>
									<text class="summary-value">{{ formData.additionalMeasures }}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="agreement-section">
						<view class="agreement-item">
							<view class="checkbox" :class="{ 'checked': formData.agreedToTerms }" @click="formData.agreedToTerms = !formData.agreedToTerms">
								<text class="check-icon" v-if="formData.agreedToTerms">✓</text>
							</view>
							<text class="agreement-text">我已仔细阅读并同意遵守所有安全规定和措施</text>
						</view>
					</view>

					<view class="step-actions">
						<button class="btn btn-secondary" @click="prevStep">上一步</button>
						<button class="btn btn-primary" @click="submitApplication" :disabled="!formData.agreedToTerms">提交申请</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStep: 0,
				selectedJsa: '',
				jsaList: [
					{
						id: '1',
						number: 'JSA20231201001',
						description: '设备维护检修作业',
						location: 'A区设备车间',
						status: 'approved',
						statusText: '已确认'
					},
					{
						id: '2',
						number: 'JSA20231201002',
						description: '高空作业安全分析',
						location: 'B区高空平台',
						status: 'approved',
						statusText: '已确认'
					},
					{
						id: '3',
						number: 'JSA20231201003',
						description: '电气作业安全分析',
						location: 'C区配电室',
						status: 'approved',
						statusText: '已确认'
					}
				],
				departmentIndex: 0,
				departmentList: [
					{ id: '1', name: '安全部' },
					{ id: '2', name: '生产部' },
					{ id: '3', name: '维修部' },
					{ id: '4', name: '工程部' },
					{ id: '5', name: '质量部' }
				],
				responsiblePersonIndex: 0,
				responsiblePersonList: [
					{ id: '1', name: '张三' },
					{ id: '2', name: '李四' },
					{ id: '3', name: '王五' },
					{ id: '4', name: '赵六' }
				],
				workTypes: [
					{ value: 'maintenance', name: '设备维护', icon: '🔧' },
					{ value: 'construction', name: '建筑施工', icon: '🏗️' },
					{ value: 'electrical', name: '电气作业', icon: '⚡' },
					{ value: 'welding', name: '焊接作业', icon: '🔥' },
					{ value: 'chemical', name: '化学品作业', icon: '🧪' },
					{ value: 'lifting', name: '起重作业', icon: '🏗️' },
					{ value: 'excavation', name: '挖掘作业', icon: '⛏️' },
					{ value: 'other', name: '其他作业', icon: '📋' }
				],
				potentialRisks: [
					{ id: '1', name: '高处坠落', level: 'high', levelText: '高风险' },
					{ id: '2', name: '物体打击', level: 'high', levelText: '高风险' },
					{ id: '3', name: '触电危险', level: 'high', levelText: '高风险' },
					{ id: '4', name: '化学品泄漏', level: 'high', levelText: '高风险' },
					{ id: '5', name: '火灾爆炸', level: 'high', levelText: '高风险' },
					{ id: '6', name: '机械伤害', level: 'medium', levelText: '中风险' },
					{ id: '7', name: '噪音危害', level: 'low', levelText: '低风险' },
					{ id: '8', name: '粉尘危害', level: 'medium', levelText: '中风险' }
				],
				requiredMeasures: [
					{ id: 'req1', name: '佩戴安全帽', description: '所有人员必须佩戴合格的安全帽' },
					{ id: 'req2', name: '穿戴工作服', description: '穿戴符合工作要求的防护服' },
					{ id: 'req3', name: '使用个人防护装备', description: '根据作业特点配备手套、护目镜等PPE' }
				],
				additionalMeasures: [
					{ id: 'add1', name: '设置警戒区域', description: '在作业区域周围设置安全警戒线' },
					{ id: 'add2', name: '安排安全监护', description: '指定专人进行安全监护和巡视' },
					{ id: 'add3', name: '准备急救用品', description: '配备急救箱和相关急救设备' },
					{ id: 'add4', name: '检查应急设备', description: '确认消防设备和应急通道畅通' },
					{ id: 'add5', name: '通讯设备', description: '配备对讲机等通讯设备' }
				],
				formData: {
					applicant: '',
					department: '',
					contactPhone: '',
					workType: '',
					startTime: '',
					endTime: '',
					workDescription: '',
					workLocation: '',
					selectedRisks: [],
					additionalRisks: '',
					selectedMeasures: [],
					additionalMeasures: '',
					agreedToTerms: false
				}
			}
		},
		computed: {
			selectedDepartment() {
				return this.departmentList[this.departmentIndex] || {}
			},
			selectedResponsiblePerson() {
				return this.responsiblePersonList[this.responsiblePersonIndex] || {}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			saveDraft() {
				uni.showToast({
					title: '草稿已保存',
					icon: 'success'
				})
			},
			selectJsa(jsaId) {
				this.selectedJsa = jsaId
			},
			getSelectedJsaInfo() {
				return this.jsaList.find(jsa => jsa.id === this.selectedJsa) || {}
			},
			nextStep() {
				if (this.currentStep < 5) {
					this.currentStep++
				}
			},
			prevStep() {
				if (this.currentStep > 0) {
					this.currentStep--
				}
			},
			// 部门选择事件
			onDepartmentChange(e) {
				this.departmentIndex = e.detail.value
				this.formData.department = this.selectedDepartment.name
			},

			// 负责人选择事件
			onResponsiblePersonChange(e) {
				this.responsiblePersonIndex = e.detail.value
			},

			// 开始时间选择
			onStartTimeChange(e) {
				this.formData.startTime = e.detail.value
			},

			// 结束时间选择
			onEndTimeChange(e) {
				this.formData.endTime = e.detail.value
			},

			// 切换风险选择
			toggleRisk(riskId) {
				const index = this.formData.selectedRisks.indexOf(riskId)
				if (index > -1) {
					this.formData.selectedRisks.splice(index, 1)
				} else {
					this.formData.selectedRisks.push(riskId)
				}
			},

			// 切换安全措施选择
			toggleMeasure(measureId) {
				const index = this.formData.selectedMeasures.indexOf(measureId)
				if (index > -1) {
					this.formData.selectedMeasures.splice(index, 1)
				} else {
					this.formData.selectedMeasures.push(measureId)
				}
			},

			// 获取工作类型名称
			getWorkTypeName(value) {
				const type = this.workTypes.find(t => t.value === value)
				return type ? type.name : value
			},

			// 格式化日期时间
			formatDateTime(dateTimeStr) {
				if (!dateTimeStr) return ''
				const date = new Date(dateTimeStr)
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}`
			},

			// 获取选中的风险文本
			getSelectedRisksText() {
				const selected = this.potentialRisks.filter(risk => this.formData.selectedRisks.includes(risk.id))
				return selected.map(risk => risk.name).join('、') || '无'
			},

			// 获取选中的措施文本
			getSelectedMeasuresText() {
				const selected = this.additionalMeasures.filter(measure => this.formData.selectedMeasures.includes(measure.id))
				return selected.map(measure => measure.name).join('、') || '无'
			},

			// 提交申请
			submitApplication() {
				if (!this.formData.agreedToTerms) {
					uni.showToast({
						title: '请先同意安全条款',
						icon: 'none'
					})
					return
				}

				// 基本验证
				if (!this.formData.applicant || !this.formData.contactPhone || !this.formData.workType ||
					!this.formData.startTime || !this.formData.endTime || !this.formData.workDescription ||
					!this.formData.workLocation) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}

				uni.showModal({
					title: '确认提交',
					content: '确定要提交工作许可申请吗？提交后将进入审批流程。',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...'
							})

							// 模拟提交过程
							setTimeout(() => {
								uni.hideLoading()
								uni.showToast({
									title: '申请已提交',
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}, 2000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		min-height: 100vh;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="subtle-pattern" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="0.8" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="80" r="0.6" fill="rgba(255,255,255,0.06)"/><circle cx="60" cy="30" r="0.4" fill="rgba(255,255,255,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23subtle-pattern)"/></svg>');
			pointer-events: none;
		}
	}
	
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #409EFF;
		color: #fff;
		
		.header-left {
			display: flex;
			align-items: center;
			
			.back-icon {
				font-size: 36rpx;
				margin-right: 10rpx;
			}
			
			.back-text {
				font-size: 28rpx;
			}
		}
		
		.page-title {
			font-size: 32rpx;
			font-weight: bold;
		}
		
		.header-right {
			.save-btn {
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				border: 2rpx solid #fff;
				border-radius: 8rpx;
			}
		}
	}
	
	.steps-container {
		background: #fff;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
		
		.steps {
			display: flex;
			align-items: center;
			justify-content: center;
			
			.step {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.step-number {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: #e4e7ed;
					color: #909399;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-bottom: 10rpx;
				}
				
				.step-text {
					font-size: 24rpx;
					color: #909399;
				}
				
				&.active {
					.step-number {
						background: #409EFF;
						color: #fff;
					}
					
					.step-text {
						color: #409EFF;
					}
				}
				
				&.completed {
					.step-number {
						background: #67C23A;
						color: #fff;
					}
					
					.step-text {
						color: #67C23A;
					}
				}
			}
			
			.step-line {
				width: 100rpx;
				height: 4rpx;
				background: #e4e7ed;
				margin: 0 20rpx;
				
				&.active {
					background: #409EFF;
				}
			}
		}
	}
	
	.form-scroll {
		height: calc(100vh - 200rpx);
	}
	
	.form-container {
		padding: 20rpx;
	}
	
	.form-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #f0f0f0;
		}
	}
	
	.jsa-list {
		.jsa-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border: 2rpx solid #e4e7ed;
			border-radius: 8rpx;
			margin-bottom: 15rpx;
			
			&.selected {
				border-color: #409EFF;
				background: #ecf5ff;
			}
			
			.jsa-info {
				.jsa-number {
					display: block;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.jsa-desc {
					display: block;
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.jsa-status {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 20rpx;
				
				&.approved {
					background: #f0f9ff;
					color: #67C23A;
				}
				
				&.pending {
					background: #fdf6ec;
					color: #E6A23C;
				}
			}
		}
	}
	
	.form-item {
		margin-bottom: 30rpx;
		
		.form-label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 15rpx;
		}
		
		.form-input {
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
			border: 2rpx solid #e4e7ed;
			border-radius: 8rpx;
			font-size: 28rpx;
			background: #fff;
			
			&:focus {
				border-color: #409EFF;
			}
		}
		
		.form-textarea {
			width: 100%;
			min-height: 120rpx;
			padding: 20rpx;
			border: 2rpx solid #e4e7ed;
			border-radius: 8rpx;
			font-size: 28rpx;
			background: #fff;
			
			&:focus {
				border-color: #409EFF;
			}
		}
	}
	
	.confirm-info {
		.info-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
			}
			
			.value {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}
	
	.button-group {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
		
		.btn {
			flex: 1;
			height: 80rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			border: none;
			
			&.btn-primary {
				background-color: #409EFF;
				color: #fff;
				
				&:disabled {
					background-color: #c0c4cc;
					color: #fff;
				}
			}
			
			&.btn-secondary {
				background-color: #fff;
				color: #409EFF;
				border: 2rpx solid #409EFF;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
	}

	// 新增样式
	.section-title {
		display: flex;
		flex-direction: column;
		margin-bottom: 32rpx;

		.title-text {
			font-size: 36rpx;
			font-weight: 700;
			color: #1a1a1a;
			margin-bottom: 8rpx;
		}

		.title-desc {
			font-size: 28rpx;
			color: #7c7c7c;
			line-height: 1.4;
		}
	}

	.step-actions {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		padding: 0 40rpx;

		button {
			flex: 1;
			max-width: 400rpx;
		}
	}

	.work-type-selector {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
		margin-bottom: 32rpx;

		.work-type-item {
			display: flex;
			align-items: center;
			padding: 24rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 0.8);
			border: 2rpx solid rgba(102, 126, 234, 0.2);
			transition: all 0.3s ease;
			cursor: pointer;

			&.selected {
				border-color: #667eea;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: #fff;
				box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
			}

			&:active {
				transform: scale(0.98);
			}

			.type-icon {
				font-size: 32rpx;
				margin-right: 16rpx;
			}

			.type-name {
				font-size: 28rpx;
				font-weight: 600;
			}
		}
	}

	.char-count {
		font-size: 24rpx;
		color: #a8a8a8;
		text-align: right;
		margin-top: 8rpx;
	}

	.risk-assessment, .safety-measures {
		.assessment-section, .measures-section {
			margin-bottom: 32rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.section-subtitle {
				font-size: 32rpx;
				font-weight: 600;
				color: #1a1a1a;
				margin-bottom: 20rpx;
				padding-left: 16rpx;
				border-left: 4rpx solid #667eea;
			}
		}

		.risk-list, .measure-list {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
		}

		.risk-item, .measure-item {
			display: flex;
			align-items: center;
			padding: 24rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 0.8);
			border: 2rpx solid rgba(102, 126, 234, 0.2);
			transition: all 0.3s ease;
			cursor: pointer;

			&.selected {
				border-color: #667eea;
				background: rgba(102, 126, 234, 0.1);
			}

			&:active {
				transform: scale(0.98);
			}

			.checkbox {
				width: 44rpx;
				height: 44rpx;
				border: 3rpx solid rgba(102, 126, 234, 0.3);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				background: rgba(255, 255, 255, 0.8);
				transition: all 0.3s ease;

				&.checked {
					border-color: #667eea;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

					.check-icon {
						color: #fff;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}

			.risk-info, .measure-info {
				flex: 1;

				.risk-name, .measure-name {
					font-size: 30rpx;
					font-weight: 600;
					color: #1a1a1a;
					margin-bottom: 4rpx;
				}

				.risk-level, .measure-desc {
					font-size: 26rpx;
					color: #7c7c7c;
				}

				.risk-level {
					&.high { color: #F56C6C; }
					&.medium { color: #E6A23C; }
					&.low { color: #67C23A; }
				}
			}
		}

		.measure-item.required {
			background: rgba(103, 194, 58, 0.1);
			border-color: rgba(103, 194, 58, 0.3);

			.checkbox.checked {
				border-color: #67C23A;
				background: linear-gradient(135deg, #67C23A 0%, #4CAF50 100%);
			}
		}
	}

	.confirm-summary {
		margin-bottom: 32rpx;

		.summary-section {
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			border-radius: 16rpx;
			padding: 32rpx;
			margin-bottom: 24rpx;
			border: 1rpx solid rgba(255, 255, 255, 0.2);
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

			&:last-child {
				margin-bottom: 0;
			}

			.summary-title {
				font-size: 32rpx;
				font-weight: 700;
				color: #1a1a1a;
				margin-bottom: 20rpx;
			}

			.summary-content {
				.summary-item {
					display: flex;
					align-items: flex-start;
					margin-bottom: 16rpx;
					padding: 16rpx;
					background: rgba(102, 126, 234, 0.02);
					border-radius: 12rpx;
					border-left: 3rpx solid rgba(102, 126, 234, 0.1);

					&:last-child {
						margin-bottom: 0;
					}

					.summary-label {
						font-size: 28rpx;
						color: #7c7c7c;
						font-weight: 600;
						min-width: 140rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					.summary-value {
						font-size: 28rpx;
						color: #1a1a1a;
						flex: 1;
						line-height: 1.5;
						word-break: break-all;
					}
				}
			}
		}
	}

	.agreement-section {
		margin-bottom: 32rpx;

		.agreement-item {
			display: flex;
			align-items: center;
			padding: 24rpx;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 16rpx;
			border: 2rpx solid rgba(102, 126, 234, 0.2);

			.checkbox {
				width: 44rpx;
				height: 44rpx;
				border: 3rpx solid rgba(102, 126, 234, 0.3);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				background: rgba(255, 255, 255, 0.8);
				transition: all 0.3s ease;
				cursor: pointer;

				&.checked {
					border-color: #667eea;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

					.check-icon {
						color: #fff;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}

			.agreement-text {
				font-size: 28rpx;
				color: #1a1a1a;
				line-height: 1.4;
				flex: 1;
			}
		}
	}
</style>